<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 心理智能对话助手</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/register_page.css' %}">
</head>
<body>
    <div class="header">
        <div class="logo-placeholder">贵州省先进计算全省重点实验室</div>
        <h1>心理智能对话助手</h1>
    </div>
    {% csrf_token %}
    <div class="main-container">
        <div class="register-container" id="registerContainer">
            <div class="welcome-section">
                <div class="avatar-container">
                    <div class="avatar">🚀</div>
                    <div class="avatar">💡</div>
                </div>
                <div class="welcome-title">加入我们</div>
                <div class="welcome-subtitle">创建您的账户，开启心理健康智能服务</div>
            </div>

            <form id="registerForm">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="firstName">姓名</label>
                        <input 
                            type="text" 
                            id="firstName" 
                            class="form-input" 
                            placeholder="请输入您的姓名"
                            required
                        >
                        <div class="error-message" id="firstNameError"></div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="username">用户名</label>
                    <input 
                        type="text" 
                        id="username" 
                        class="form-input" 
                        placeholder="请输入用户名（3-20个字符）"
                        required
                    >
                    <div class="error-message" id="usernameError"></div>
                    <div class="success-message" id="usernameSuccess"></div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="phone">手机号码</label>
                    <input 
                        type="tel" 
                        id="phone" 
                        class="form-input" 
                        placeholder="请输入您的手机号码"
                        required
                    >
                    <div class="error-message" id="phoneError"></div>
                    <div class="success-message" id="phoneSuccess"></div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="password">密码</label>
                    <input 
                        type="password" 
                        id="password" 
                        class="form-input" 
                        placeholder="请输入密码（至少8个字符）"
                        required
                    >
                    <div class="password-strength" id="passwordStrength">
                        <div class="strength-bar">
                            <div class="strength-fill"></div>
                        </div>
                        <div class="strength-text">密码强度：<span id="strengthText">请输入密码</span></div>
                    </div>
                    <div class="error-message" id="passwordError"></div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="confirmPassword">确认密码</label>
                    <input 
                        type="password" 
                        id="confirmPassword" 
                        class="form-input" 
                        placeholder="请再次输入密码"
                        required
                    >
                    <div class="error-message" id="confirmPasswordError"></div>
                    <div class="success-message" id="confirmPasswordSuccess"></div>
                </div>

                <div class="checkbox-group">
                    <input type="checkbox" id="agreeTerms" required>
                    <label for="agreeTerms">
                        我已阅读并同意 <a href="#" target="_blank">《用户协议》</a> 和 <a href="#" target="_blank">《隐私政策》</a>
                    </label>
                </div>

                <div class="checkbox-group">
                    <input type="checkbox" id="agreeNewsletter">
                    <label for="agreeNewsletter">
                        我同意接收产品更新和健康资讯邮件
                    </label>
                </div>

                <button type="submit" class="register-button" id="registerButton">
                    创建账户
                </button>
            </form>

            <div class="divider">
                <span>或者</span>
            </div>

            <div class="login-link">
                已有账户？<a href="">立即登录</a>
            </div>

            <div class="features-hint">
                <h4>🎯 注册后您可以享受</h4>
                <div class="features-list">
                    <div class="feature-item">💬 个性化对话</div>
                    <div class="feature-item">📊 专业评估</div>
                    <div class="feature-item">📈 进度跟踪</div>
                    <div class="feature-item">🔒 隐私保护</div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        © 2025 贵州省先进计算全省重点实验室 版权所有
    </div>

{% load static %}
<script src="{% static 'js/register_page.js' %}"></script>
</body>
</html>